<template>
  <div>

      <div style="margin-bottom:15px">
        <el-input v-model="params.name" style="width:200px" placeholder="请输入家教名称"></el-input>
        <el-input v-model="params.author" style="width:200px;margin-left:5px" placeholder="请输入辅导学科"></el-input>
        <el-button type="warning" style="margin-left:10px" @click="findBySearch()">查询</el-button>
        <el-button type="warning" style="margin-left:10px" @click="reset()">清空</el-button>
        <el-button type="success" style="margin-left:10px" @click="sendMessage()">发送短信</el-button>
        <el-button type="success" style="margin-left:10px" @click="sendEmails()">发送邮件</el-button>
        <el-button type="primary" style="margin-left:10px" @click="add()" v-if="user.role === 'ROLE_ADMIN'">新增</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          
          <el-table-column prop="tutorName" label="家教名字" ></el-table-column>
          
          <el-table-column prop="studentName" label="学生名字"></el-table-column>
          <el-table-column prop="typeName" label="辅导学科"></el-table-column>
          <el-table-column prop="price" label="家教费用"></el-table-column>
          <el-table-column prop="pay"   label="是否支付"></el-table-column>
          <el-table-column prop="status" label="审核状态"></el-table-column>
          <el-table-column prop="reason" label="审核意见"></el-table-column>
          <el-table-column prop="time" label="预订时间"></el-table-column>
          
          <el-table-column  label="操作" width="100px">
            <template slot-scope="scope">
        
              <el-button type="success" @click="communicate(scope.row)" v-if="scope.row.pay ==='已支付'">沟通</el-button>
                     
              <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
                <el-button slot="reference" type="danger" style="margin-left:5px" v-if="user.role === 'ROLE_ADMIN'">删除</el-button>
              </el-popconfirm>
              <!-- <el-button type="danger">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

        <div style="margin-top: 10px;">
          
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="params.pageNum"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="params.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
        </div>


        <!-- 短信 -->

        <div>

                    <el-dialog title="请输入短信内容" :visible.sync="auditVisible" width="30%">
            <!-- <el-form :model="form"> -->
            <el-form>
              <el-form-item label="短信内容" label-width="15%">
                <el-input v-model="message" autocomplete="off" style="width:90%"></el-input>
              </el-form-item>        
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="auditVisible = false">取 消</el-button>
              <el-button type="primary" @click="send()">确 定</el-button>
            </div>
          </el-dialog>

        </div>

             <!-- 沟通平台 -->
        <div>

          <el-dialog title="沟通平台" :visible.sync="dialogCommunicateVisible" width="50%">
            <el-form :model="form">
              
              <el-form-item  label-width="8%">
                <div id="editor" style="width:90%"></div>
              </el-form-item>
              
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogCommunicateVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
          </el-dialog>

        </div>
             <!-- 发送邮件 -->
        <div>

                    <el-dialog title="请填写信息" :visible.sync="dialogEmailVisible" width="50%">
            <el-form>
              <el-form-item label="发件地址" label-width="15%">
                <el-input v-model="setFrom" autocomplete="off" style="width:90%"></el-input>
              </el-form-item>
            

              <el-form-item label="收件地址" label-width="15%">
                <el-input v-model="setTo" autocomplete="off" style="width:90%"></el-input>
              </el-form-item>

              <el-form-item label="邮件主题" label-width="15%">
                <el-input v-model="subject" autocomplete="off" style="width:90%"></el-input>
              </el-form-item>

              

              <el-form-item label="邮件正文" label-width="15%">
                <div id="editor" style="width:90%"></div>
              </el-form-item>
              
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogEmailVisible = false">取 消</el-button>
              <el-button type="primary" @click="sendEmail()">确 定</el-button>
            </div>
          </el-dialog>

        </div>
        <!-- 邮件内容结束 -->
              

  </div>
</template>

<script>
import request from '@/utils/request'

import E from 'wangeditor'

let editor
function initWangEditor(content) {	setTimeout(() => {
  if (!editor) {
    editor = new E('#editor')
    editor.config.placeholder = '请输入内容'
    editor.config.uploadFileName = 'file'
    //文件上传的接口
    editor.config.uploadImgServer = 'http://localhost:8080/api/files/wang/upload'
    editor.create()
  }
  editor.txt.html(content)
}, 0)
}

    export default {
      data() {
        return {
          params:{
            name:'',
            author:'',
            pageNum:1,
            pageSize:5
          },
          tableData: [],
          total: 0,
          //dialogFormVisible: false,
          //form:{},
          //dialogFormVisible: false,
          message:'',
          editorVisible:false,
          dialogCommunicateVisible:false,
          viewData:'',
          typeObjs:[],
          auditVisible: false,
          dialogEmailVisible: false,
          form:{},
          subject:'',
          setText:'',
          setTo:'',
          setFrom:'',
          //setFrom: user.email,
          user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
        }
      },
      //页面加载的时候，做一些事情，在created里面
      created(){
         this.findBySearch();
         this.findTypes();
      },
      //定义一些页面上空间触发的事件调用的方法
      methods:{ 
        findBySearch(){
          request.get("/hire/search",{
            params:this.params
          }).then(res =>{
            if(res.code === '0'){
              this.tableData = res.data.list
              this.total = res.data.total
            }else{
                  this.$message.error(res.msg)
            }
          })
        },
        add(){
          this.form = {}
          this.dialogFormVisible = true
        },
        communicate(obj){
           this.form = obj
           initWangEditor(obj.content ?this.form.content: "")
           this.dialogCommunicateVisible = true
        },
        submit(){
          alert(this.message)
          this.form.content = editor.txt.html()
          request.put("/hire/interact",this.form).then(res =>{
            if(res.code === '0'){
                this.$message.success("沟通成功")
                this.dialogCommunicateVisible = false
                this.findBySearch()
            }else{
                            this.$message.error(res.msg)
            }
          })
        },
        send(){
          //alert(this.message)
          let param ={
            message : this.message
          }
          request.get("/admin/sendMsg",{
            params:param
          }).then(res =>{
            if(res.code === '0'){
                this.$message.success("短信发送成功")
                this.auditVisible = false
                this.findBySearch()
            }else{
                            this.$message.error(res.msg)
            }
          })
        },
        edit(obj){
          this.dialogFormVisible = true
          this.form = obj

        },
        reset(){
           this.params={
            pageNum:1,
            pageSize:5,
            name:'',
            author:''
           }
           this.findBySearch()
        },
        sendMessage(){
          
          this.auditVisible = true
        },
        submit(){
          this.form.content = editor.txt.html()
          request.put("/hire/interact",this.form).then(res =>{
            if(res.code === '0'){
                this.$message.success("沟通成功")
                this.dialogCommunicateVisible = false
                this.findBySearch()
            }else{
                            this.$message.error(res.msg)
            }
          })
        },

        sendEmails(){
            this.dialogEmailVisible = true
            initWangEditor("")
        },
        sendEmail(){
          let param ={
            subject : this.subject,
            setText : editor.txt.html(),
            setTo : this.setTo,
            setFrom : this.setFrom
          }
          request.get("/admin/sendEmail",{
            params:param
          }).then(res =>{
            if(res.code === '0'){
                this.$message.success("邮件发送成功")
                this.dialogEmailVisible = false
                this.findBySearch()
            }else{
                            this.$message.error(res.msg)
            }
          })
        },
        
        handleSizeChange(pageSize){
           this.params.pageSize = pageSize
           this.findBySearch()
        },
        handleCurrentChange(pageNum){
          this.params.pageNum = pageNum
           this.findBySearch()
        },
        del(id){
          request.delete("/reserve/"+id).then(res =>{
            if(res.code === '0'){
              this.$message.success("删除成功")
              this.findBySearch()
            }else{
              this.$message.error(res.msg)
            }
          })
        },
  
      }
    }
  </script>